/*
 * @desc 顶部导航栏,详细用法请参考README.md 文档中 topHeader 组件的用法
 **/ 

<template>
  <div id="topHeaderComponent">
    <div :class="['top-header', nobg == true ? 'top-header-transparent' : '']">
      <div class="top-header-left" @click="leftMethod" v-if="showLeft">
        <slot name="left">
          <img src="static/image/public/leftIcon.png" class="top-header-leftIcon" />
        </slot>
      </div>
      <div class="top-header-right" @click="rightMethod" v-if="showRight">
        <slot name="right">&nbsp;</slot>
      </div>
      <div class="top-header-title">
        <slot name="title">{{ title }}</slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //是否显示左边的内容。
    showLeft: {
      type: Boolean,
      default: true
    },
    //是否显示右边的内容。如果为true，则需要添加插槽内容
    showRight: {
      type: Boolean,
      default: false
    },
    //标题内容。
    title: {
      type: String,
      default: '标题' //标题
    },
    //是否阻止返回事件。如果为true，则需要在父组件接收事件。
    preventGoBack: {
      type: Boolean,
      default: false
    },
    //背景是否透明。true表示背景透明和标题颜色为白色
    nobg: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {};
  },
  methods: {
    //左边点击事件
    leftMethod: function() {
      if (this.preventGoBack) {
        this.$emit('on-click-back');
      } else {
        //默认执行返回事件。
        this.$router ? this.$router.back() : window.history.back();
      }
    },
    //右边的点击事件
    rightMethod: function() {
      this.$emit('on-click-right');
    }
  }
};
</script>

<style lang="less" scoped>
#topHeaderComponent {
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    line-height: 88px;
    z-index: 100;
    background: white;
    text-align: center;
    color: #333;
    &.top-header-transparent {
      background: transparent;
      color: white;
    }
    .top-header-left {
      float: left;
      width: 100px;
      .top-header-leftIcon {
        width: 34px;
        height: 34px;
        display: inline-block;
        vertical-align: text-bottom;
      }
    }
    .top-header-title {
      overflow: hidden;
      font-size: 36px;
      font-weight: bold;
      margin: 0 120px;
    }
    .top-header-right {
      float: right;
      width: 100px;
      height: 100%;
      padding-right: 20px;
    }
  }
}
</style>